import {Button, Form, Input, message, Space, Typography} from "antd";
import {UserAddOutlined} from "@ant-design/icons";
import styles from './Register.module.scss'
import {Link, useNavigate} from "react-router-dom";
import {LOGIN_PATHNAME} from "../router";
import {useRequest} from "ahooks";
import {registerService} from "../services/user";

const {Title} = Typography

export function Register() {

    const nav = useNavigate()
    const {run} = useRequest(async ({
                                        username,
                                        password,
                                        nickname
                                    }) => await registerService(username, password, nickname), {
        manual: true,
        onSuccess() {
            message.success('注册成功').then();
            nav(LOGIN_PATHNAME)
        }
    })

    function onFinish(values: any) {
        run(values)
    }

    return (
        <div className={styles.container}>
            <div>
                <Space>
                    <Title><UserAddOutlined></UserAddOutlined></Title>
                    <Title level={2}>注册新用户</Title>
                </Space>
            </div>
            <div>
                <Form
                    labelCol={{span: 6}}
                    wrapperCol={{span: 16}}
                    onFinish={onFinish}
                >
                    <Form.Item label="用户名" name={'username'} validateTrigger={'onBlur'}
                               rules={[{required: true, message: '请输入用户名'}, {
                                   type: 'string', min: 5, max: 20, message: '字符串在 5-20 之间'
                               }, {
                                   pattern: /^\w+$/, message: '只能是字母数字下划线'
                               }
                               ]}>
                        <Input></Input>
                    </Form.Item>
                    <Form.Item label="密码" name={'password'} rules={[{required: true, message: '请输入密码'}]}>
                        <Input.Password></Input.Password>
                    </Form.Item>
                    <Form.Item label="确认密码" name={'confirm'} dependencies={['password']}
                               rules={[{required: true, message: '请输入密码'},
                                   ({getFieldValue}) => ({
                                       validator(_, value) {
                                           if (!value || getFieldValue('password') === value) {
                                               return Promise.resolve()
                                           } else {
                                               return Promise.reject(new Error('两次密码不一致'))
                                           }
                                       }
                                   })]}>
                        <Input.Password></Input.Password>
                    </Form.Item>
                    <Form.Item label="昵称" name={'nickname'}>
                        <Input></Input>
                    </Form.Item>
                    <Form.Item wrapperCol={{offset: 6, span: 16}}>
                        <Space>
                            <Button type={'primary'} htmlType={'submit'}>
                                注册
                            </Button>
                            <Link to={LOGIN_PATHNAME}>已有帐户，登录</Link>
                        </Space>
                    </Form.Item>
                </Form>
            </div>
        </div>
    );
}